<template>
    <div id="login">
        <p class="login-mark"></p>
        <h2 class="title">中国银行</h2>

        <div class="login-content">
            <p class="login-content-beijing"></p>
            <p class="login-content-title">银行OA系统登录</p>
            <div class="login-content-body">
                <el-form
                    :model="ruleForm"
                    :rules="rules"
                    ref="ruleForm"
                    label-width="100px"
                    class="login-ruleForm">

                    <el-form-item prop="empCode">
                        <el-input placeholder="admin" v-model="ruleForm.empCode" class="empCode_input">
                            <template slot="prepend"><i class="el-icon-s-custom"></i></template>
                        </el-input>
                    </el-form-item>
                    <el-form-item prop="password">
                        <el-input placeholder="password" v-model="ruleForm.password" class="empPassword_input">
                            <template slot="prepend"><i class="el-icon-key"></i></template>
                        </el-input>
                    </el-form-item>

                    <!-- <el-form-item>
                      <router-link to="/register" class="registerText">
                        <p >立即注册 ?</p></router-link>
                    </el-form-item> -->

                    <el-form-item>
                        <el-button class="submitBtn" @click="submitForm('ruleForm')">Login</el-button>
                    </el-form-item>
                </el-form> 
            </div>
        </div>
    </div>
</template>

<script>
import { login } from '@/api/login'

export default ({
    name:"MyLogin",
    data() {
        return {
            ruleForm: {
                empCode: "",
                password: "",
            },
            rules: {
                empCode: [
                    { required: true, message: "请输入用户账号", trigger: "blur" },
                    {
                        min: 0,
                        max: 16,
                        message: "长度在 0 到 16 个字符",
                        trigger: "blur",
                    },
                ],
                password: [
                    { required: true, message: "请输入用户密码", trigger: "blur" },
                    {
                        min: 5,
                        max: 10,
                        message: "长度在 5 到 10 个字符",
                        trigger: "blur",
                    },
                ],
            },
        };  
    },
    methods: {
        submitForm(empCode) {
          this.$refs[empCode].validate((valid) => {
            if (valid) {
              login(this.ruleForm.empCode, this.ruleForm.password).then(
                (res) => {
                  console.log(res)
                  console.log(res.data.data);
                  if (res.data.code === '0000') {
                    localStorage.setItem("token", res.data.data);
                    console.log("登录页面"+ res.data.data)
                    this.$store.commit("setEmp",res.data.data)
                    this.$router.replace({ path: "/homePage" });
                  } else {
                    this.$message(res.msg);
                  }
                }
              );
            } else {
              console.log("error submit!!");
              return false;
            }
          });
        },
        resetForm(empCode) {
          this.$refs[empCode].resetFields();
        },
    },

})
</script>

<style scoped>
*{
    margin: 0px;
    padding: 0px;
}
#login{
    width: 100%;
    height: 760px;
    background-image: url("/src/assets/background.png");
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    top: -3px;
    left: -3px;
}
.login-mark{
    width: 80px;
    height: 80px;
    /* border: 2px solid gray; */
    position: absolute;
    top: 105px;
    left: 1050px;
    background-image: url("/src/assets/login-mark.png");
    background-repeat: no-repeat;
    background-size: cover;
}
.title{
    color: #bd423e;
    font-size: 40px;
    font-family: '楷体';
    position: absolute;
    top: 120px;
    left: 1150px;
}
.login-content{
    width: 400px;
    height: 320px;
    border: 8px solid #c41212;
    background-color: white;
    position: absolute;
    top: 210px;
    left: 1050px;
}
.login-content-beijing{
    width: 400px;
    height: 320px;
    background-image: url("/src/assets/login-content.png");
    opacity: 0.1;
}
.login-content-title{
    height: 80px;
    line-height: 80px;
    font-size: 25px;
    text-align: center;
    font-family: '宋体';
    font-weight: bold;
    position: relative;
    top: -320px;
}
.login-content-body{
    height: 240px;
    position: relative;
    top: -320px;
}
.empCode_input{
    width: 260px;
    height: 39px;
    line-height: 39px;
    /* border: 1px solid gray; */
    border-radius: 0px 5px 5px 0px;
    position: relative;
    top: 15px;
    left: -28px;
}

.empPassword_input{
    width: 260px;
    height: 39px;
    line-height: 39px;
    /* border: 1px solid gray; */
    border-radius: 0px 5px 5px 0px;
    position: relative;
    top: 10px;
    left: -28px;
}

.submitBtn{
    width: 200px;
    position: relative;
    top: 20px;
    font-size: 20px;
}
.submitBtn:hover{
    color: white;
    background-color: rgb(247, 186, 159);
}
</style>